<template>
  <div>
    <a-card>
      <a-form class="flex flex-wrap" ref="formRef" :model="formState" name="basic" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }" autocomplete="off">
        <a-form-item label="年份" name="year" class=" md:w-64 w-full !mb-1">
          <a-date-picker v-model:value="formState.year" picker="year" allowClear />
        </a-form-item>
        <a-form-item label="月份" name="month" class=" md:w-64 w-full !mb-1">
          <a-select v-model:value="formState.month" allowClear>
            <a-select-option :key="item" v-for="item in 12" :value='item'>{{item}}月份</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item class=" md:w-56 w-full !mb-1">
          <a-button @click="getData" class="  ml-3 bg-base text-white">搜索</a-button>
          <a-button @click="reset" class=" ml-1">清空</a-button>
        </a-form-item>
      </a-form>
    </a-card>
    <a-card class=" !mt-2">
      <h3 class="text-default mt-4">每日活跃数</h3>
      <div id="dau" class=" mt-2 h-80"></div>
      <h3 class="text-default mt-4">每日注册数</h3>
      <div id="dru" class=" mt-2 h-80"></div>
    </a-card>
  </div>
</template>

<script lang='ts' setup>
import type { Dayjs } from 'dayjs'
import { reactive, toRefs } from 'vue'
import { dau, dru } from '@/request/api'
import dayjs from 'dayjs'
import echarts from '@/utils/echarts'
const formRef = ref<any>()
let dauDom: any
let druDom: any
const formState = reactive<{ year: Dayjs; month: number }>({
  year: dayjs(),
  month: new Date().getMonth() + 1,
})
const getData = () => {
  dau({
    year: dayjs(formState.year).year() as number,
    month: formState.month,
  }).then((res) => {
    if (res.code == 200) {
      const { stats } = res.result
      dauDom.setOption({
        xAxis: {
          data: stats.map((item: any, index: number) => item.date),
          type: 'category', //类名轴
          axisLabel: {
            // 坐标轴刻度标签的相关设置
            textStyle: {
              color: '#d7d7d7', //x轴字体颜色
            },
          },
        },
        yAxis: {
          name: '次',
        },
        tooltip: {
          show: true,
        },
        series: [
          {
            type: 'bar',
            data: stats.map((item: any, index: number) => item.cnt),
          },
        ],
      })
    }
  })

  dru({
    year: dayjs(formState.year).year() as number,
    month: formState.month,
  }).then((res) => {
    if (res.code == 200) {
      const { stats } = res.result
      druDom.setOption({
        xAxis: {
          data: stats.map((item: any, index: number) => item.date),
          type: 'category', //类名轴
          axisLabel: {
            // 坐标轴刻度标签的相关设置
            textStyle: {
              color: '#d7d7d7', //x轴字体颜色
            },
          },
        },
        yAxis: {
          name: '次',
        },
        tooltip: {
          show: true,
        },
        series: [
          {
            type: 'bar',
            data: stats.map((item: any, index: number) => item.cnt),
          },
        ],
      })
    }
  })
}

const reset = () => {
  formRef.value.resetFields()
  getData()
}

onMounted(() => {
  getData()
  dauDom = echarts.init(document.getElementById(`dau`) as HTMLElement)
  druDom = echarts.init(document.getElementById(`dru`) as HTMLElement)
})
</script>